<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="chapterMoi"><fmt:formatNumber type="number" maxIntegerDigits="4" value="${chapterTruyen.chapterNumber}" /></c:set>
<head>
	<title>Đọc truyện tranh ${truyen.name} - Chapter ${chapterMoi} | truyện tranh ${truyen.name}</title>
	<meta name="keywords" content="truyen tranh ${truyen.alias},doc truyen ${truyen.alias}, xem truyen ${truyen.alias},doc truyen ${truyen.alias} online, xem truyen ${truyen.alias} online" />
	<meta name="description" content="Truyện tranh ${truyen.name} - Chapter ${chapterMoi}, 
									<c:choose>
										<c:when test="${fn:length(truyen.info)>97}">
											<c:set var="description" value="${fn:substring(truyen.info,0,97)} ..." />
											${description}
										</c:when>
										<c:otherwise>
											${truyen.info}
										</c:otherwise>
									</c:choose>" />
	<!-- 	coment facebook -->
	<meta property="fb:app_id" content='<fmt:message key="app.idFaceBook" />' />
	<link rel="image_src" href="${truyen.linkImage}/s61/${truyen.nameImage}" />
	<meta property="og:title" content="Truyện tranh ${truyen.name} | Đọc truyện tranh ${truyen.name} online" />
	<meta property="og:image" content="${truyen.linkImage}/s61/${truyen.nameImage}" />
	<meta property="og:description" content="${truyen.info}"/>	
	<script type="text/javascript" src="<spring:url value="/resources/scripts/jquery.cookie.js" />"></script>	
	<script type="text/javascript">
	    var curImg = 0;
		$(document).ready(function(){
			//Dinh background cho trang doc truyen chi tiet
			$("#content").css({
				width:"100%"
			});
			$("#boxReadComic").css({
				background:"#222 url(<spring:url value='/resources/themes/comic/images/background_den.png' />) repeat"
			});
			//xu ly phan trang
			$("#lstChapter").change(function(){
				var urlChapter = $(this).val();
				window.location.href=urlChapter;
			});
			
			var urlChapterFirst = $("select#lstChapter option").last().attr("value");
			var urlChapterPrev = $("select#lstChapter option:selected").next().attr("value");
			var urlChapterNext = $("select#lstChapter option:selected").prev().attr("value");
			var urlChapterLast = $("select#lstChapter option").first().attr("value");
			
			if(urlChapterPrev === undefined){
				$('.firstChapter').hide();
				$('.prevChapter').hide();
			}
			if(urlChapterNext === undefined){
				$('.nextChapter').hide();
				$('.lastChapter').hide();
			}
			
			$('.firstChapter').attr('href',urlChapterFirst);
			$('.prevChapter').attr('href',urlChapterPrev);
			$('.nextChapter').attr('href',urlChapterNext);
			$('.lastChapter').attr('href',urlChapterLast);
			
			//scroll
			var offsetTop = Math.round($(".readComic").position().top);
			$(window).scroll(function(){
				var scr = $(this).scrollTop();
				var offsetBottom = offsetTop + $(".readComic").height() + 5;
				var screenHeight = screen.availHeight;
				
				if(scr > screenHeight){
					$("#goTop").stop(true,true).fadeIn("fast");
				}else{
					$("#goTop").stop(true,true).fadeOut("slow");
				}
				
				if(scr < 150){
					$("#controlChapter").css({
						top: "152px",
						position: "absolute"
					});
				}else if(scr < offsetBottom ){
					$("#controlChapter").css({
						top: 0,
						position: "fixed"
					});
				}else{
					$("#controlChapter").css({
						top: offsetBottom + "px",
						position: "absolute"
					});
				}
			});
			//go top
			$("#goTop").click(function(){
				$("html,body").animate({
					scrollTop: 0
				},"500");
			});
			$(window).load(function(){
				//fix width #controlChapter h4
// 				$("#controlChapter h4").css({
// 					width: (screen.availWidth - 770) + "px"
// 				});
			});
			var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
		    po.src = 'https://apis.google.com/js/plusone.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
		    
		    //lay tong so hinh
		    var imgSize = $('.hinh').size();
		    //set cookie doc nhieu trang hoac 1 trang
		    if($.cookie("kieuDoc") == 1){
				$(".hinh").hide();
				$("#hinh0").show();
				$("#motTrang").attr("selected","selected");
				$(".guideLine").stop(true,true).fadeIn("slow");
				xemTheo1Trang(imgSize,curImg);
				setTimeout(function(){
					$(".guideLine").stop(true,true).fadeOut("slow");
				},10000);
    		}else{
    			$.cookie("kieuDoc",2,{expires: 7});
    			$(".hinh").show();
    			$(".guideLine").stop(true,true).fadeOut("fast");
    			$("#nhieuTrang").attr("selected","selected");
    		}
            
            $("#chonKieuDoc").change(function(){
            	var kieuDoc = $(this).val();
            	if(kieuDoc == 1){
            		$.cookie("kieuDoc",1,{expires: 7});
            		$(".hinh").hide();
    				$("#hinh0").show();
    				$(".guideLine").stop(true,true).fadeIn("slow");
    				xemTheo1Trang(imgSize,curImg);
    				setTimeout(function(){
    					$(".guideLine").stop(true,true).fadeOut("slow");
    				},10000);
            	}else{
            		$.cookie("kieuDoc",2,{expires: 7});
            		$(".hinh").show();
            		$(".guideLine").stop(true,true).fadeOut("fast");
            	}
//     			var w=window.open("/nhaccho/voteSong.htm");
//     			w.blur();
//     			self.focus();
    			location.reload();
    		});
		});
		//ham nay co hieu dung khi su dung kieu xem theo 1 trang
		function xemTheo1Trang(iSize,cImg){
			$(".readComic").find('br').remove();
	        $(window).keyup(function (e){
	     	   if(e.which == 39) {//Thêm sự kiện bấm phiến Right để toi
		       		   if (cImg < iSize - 1) {
		  					nextImg(cImg, iSize);
		  					cImg++;
					   };
	   		   }else if(e.which == 37){//Thêm sự kiện bấm phiến Left để lui
	       	   		if (cImg > 0) {
						prevImg(cImg);
						cImg--;
					};
	   		   }
		   });
		}
		// Hàm xử lý khi nút Next được ấn
		function nextImg(img,imgSize) {
			var nImg = img + 1;
			if (nImg > 0 && nImg < imgSize) {
				$('#hinh' + img).hide();
				$('#hinh' + nImg).show();
			}
		}
		// Hàm xử lý khi nút Previous được ấn
		function prevImg(img) {
			var pImg = img - 1;
			if (pImg >= 0) {
				$('#hinh' + img).hide();
				$('#hinh' + pImg).show();
			}
		}
	</script>
</head>
<body>
	<jsp:include page="boxReadComic.jsp" />
	<section style="width:1000px;margin:auto">
		<section id="boxMain">
			<%-- 		<jsp:include page="/WEB-INF/includes/ads468x60.jsp" /> --%>
			<jsp:include page="../boxComment.jsp" />
			<%-- 		<jsp:include page="/WEB-INF/includes/ads468x60.jsp" /> --%>
			<jsp:include page="boxComicSameAuthor.jsp" />
		</section>
		<aside>
			<jsp:include page="sidebar/listNewChapter.jsp" />
		</aside>
	</section>
	<jsp:include page="controlChapter.jsp" />
	<div id="goTop" title="Về đầu trang"></div>
</body>